<style scoped lang="scss">
.ListMap-wrapper {
  margin-top: 5px;
  border: 1px solid #eee;
}
.ListMap-header {
  display:flex;
  justify-content: flex-start;
  align-items: center;
  height:32px;
}
.ListMap-title {
  display: flex;
  width:100%;
  height:100%;
  justify-content: space-between;
  align-items: center;
  background-color: #f7f7f7;
  border-radius: 2px;
  //background-color: #f7f7f7;
  border: 1px solid #dcdee2;
}
.ListMap-mark {
  width:5px;
  height:32px;
  background-color: #2d8cf0;
  border-color: #2d8cf0;
  margin-right:2px;
}
.ListMap-action {
  width:20px;
  margin-right: 5px;
  cursor: pointer;
}
.ListMap-subject-frame {
  width:100%;
  height:1px;
  border-top:1px solid #2d8cf0;
  padding-left: 16px;
}
.ListMap-subject {
  position: relative;
  top: -14px;
  padding: 0 16px;
  background-color: white;
  font-weight: bolder;
  font-size: 16px;
  color: #2d8cf0;
}
//.ListMap-newItem-title {
//  display: flex;
//  width:100%;
//  height:100%;
//  padding-left: 28px;
//  justify-content: space-between;
//  align-items: center;
//  background-color: #f7f7f7;
//  border-radius: 2px;
//  //background-color: #f7f7f7;
//  border: 1px solid #dcdee2;
//}
</style>
<template>
  <div class="ListMap-wrapper">
    <starTemplateSubject :subject="subject"></starTemplateSubject>
    <starTemplateMap v-for="(item,i) in data" :key="i"
      :title="!!titlePath?titlePrefix+lodash.get(item,titlePath):titlePrefix+' - '+i"
      :titleStyle="titleStyle"
      :value="item"
      :labelStyle="labelStyle"
      :fields="!!fields?fields:fieldsFn(item,i)"
      :editable="editable"
      :checkable="checkable"
      :expanded="expandIndex===i"
      @remove="remove(i)"
      @expand="expand($event,i)"
      @change="change(item,i)"
    >
      <template>
        <slot name="content" :rowIndex="i"></slot>
      </template>
    </starTemplateMap>
    <starTemplateNewField v-if="editable" :titleStyle="titleStyle" :newMap="newMap" @add="add">
      <slot><span :style="titleStyle">{{ newMap }}</span></slot>
    </starTemplateNewField>
  </div>
</template>

<script>
export default {
  name: "starTemplateListMap",
  data(){
    return {
      expandIndex:-1
    }
  },
  props:{
    subject:{
      default:()=>{
        return 'subject';
      }
    },
    titlePrefix:{
      default:()=>{
        return 'title';
      }
    },
    titlePath:{
      default:()=>{
        return null;
      }
    },
    titleStyle:{
      default:()=>{
        return {};
      }
    },
    checkable: {
      default: () => {
        return false;
      }
    },
    newMap:{
      default: () => {
        return '';
      }
    },
    data:{
      default:()=>{
        return [
          {abc:'abc1', def:{www:'www1'}},
          {abc:'abc2', def:{www:'www2'}},
        ]
      }
    },
    fields: {
      default: () => {
        return [
          {dataIndex:'abc',label:'abc',tip:'abc',config:{type:'text'}},
          {dataIndex:'def.www',tip:'www',config:{type:'text'}},
        ];
      }
    },
    fieldsFn: {
      type:Function,
    },
    labelStyle: {
      default: () => {
        return {};
      }
    },
    editable:{
      default:()=>{
        return false;
      }
    },
    addAction:{
      default:()=>{
        return false;
      }
    },
    removeAction:{
      default:()=>{
        return false;
      }
    },
  },
  mounted() {

  },
  methods:{
    change(item,index){
      this.data.splice(index,1,this.lodash.cloneDeep(item));
      this.$emit('change',item,index)
    },
    add(){
      if(this.addAction){
        let map={};
        this.fields.map(item=>{
          this.lodash.set(map,item.dataIndex,null)
        });
        this.data.push(map)
      }else{
        this.$emit('add');
      }
    },
    remove(index){
      if(this.removeAction){
        this.data.splice(index,1)
      }else{
        this.$emit('remove',index);
      }
    },
    expand(exp,index){
      if(exp){
        this.expandIndex=index;
      }
    }
  }
}
</script>

